<template>
  <div class="app-container">
  <div class="top-main">
    <el-form  class="top-form-fl" :model="searchForm" label-width="auto" :inline="true">
      <el-form-item label="求购箱城市">
        <SelectCity :selectCity="searchForm.carryCityIds" :config="searchForm.config" @cityId="selectCity"></SelectCity>
      </el-form-item>
      <el-form-item label="箱型">
        <el-select v-model="searchForm.boxType" clearable>
          <el-option v-for="(item,index) in boxInfo.boxTypeInfo" :key="index" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱况">
        <el-select v-model="searchForm.boxCondition" clearable>
          <el-option v-for="(item,index) in boxInfo.boxConditionInfo1" :key="index" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户" >
        <el-input v-model.trim="searchForm.companyName" clearable placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="求购编号">
        <el-input v-model.trim="searchForm.releaseNo" clearable placeholder="请输入求购编号"></el-input>
      </el-form-item>
    </el-form>
    <div class="top-from-fr">
        <el-button class="top-Search" @click="getTableData" type="primary">搜索</el-button>
        <el-button class="top-Refresh" @click="resetFilter">重置</el-button>
      </div>   
    </div>
    <BoxTrade :data="param.carData" :config="param.config" @pageChange="onTablePageChange" @handleXiaDan="handleXiaDan" @handleChakan="handleChakan"></BoxTrade>
  </div>
</template>

<script lang="ts" setup>
import {  onMounted, ref, reactive} from 'vue';
import BoxTrade from '@/components/cardBox/boxTrade';
import { Search, Refresh } from '@element-plus/icons-vue';
import SelectCity from '@/components/citySelect/selectCity';
import boxInfo from '@/constant/containerInfo';
import { saleBoxSelectWantBuyPage } from '@/api/boxDeal/boxSeel';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();

const searchForm = reactive({
  carryCityIds: '',
  boxType:'',
  boxCondition:'',
  companyName:'',
  releaseNo:'',
  config: {
    multiple:false,  // 是否多选
    disabled:false,  // 是否禁用
    collapsetags: false // 多选时是否将选中值按文字的形式展示
  }
});
const param = reactive({
  pageNum: 1,
  pageSize: 10,
  carData:[],
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

onMounted(() => {
  getTableData()
});
const selectCity = (val) => {
  searchForm.carryCityIds = val
}

const getTableData = () => {
  let reqParameters  = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityId: searchForm.carryCityIds,
    companyName: searchForm.companyName,
    releaseNo: searchForm.releaseNo?.toUpperCase(),
    boxType: searchForm.boxType,
    boxCondition: searchForm.boxCondition

  }
  saleBoxSelectWantBuyPage(reqParameters).then(res => {
    param.carData = res.data.list
    param.config.total = res.data.total
  });
}

const resetFilter = () => {
  searchForm.carryCityIds = ''
  searchForm.boxType = ''
  searchForm.boxCondition = ''
  searchForm.companyName = ''
  searchForm.releaseNo = ''
  getTableData()
}

const handleXiaDan = (row: any) => {
  // orderInfo().setRowData(row)
  // router.push('agentBuy')
};
//查看
const handleChakan = (row: any) => {
  // orderInfo().setRowData(row)
    router.push({
    path: '/xdzxcs/tradeOrder/detaisInfo',
    query: { boxId: row.releaseSaleId}
  })

};
//分页
function onTablePageChange(page: { pageNum: number; pageSize: number }) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};

</script>

<style scoped>
.svga-container {
  width: 300px;
  /* 根据需要调整大小 */
  height: 300px;
  /* 根据需要调整大小 */
}
</style>